<template>
	<view class="top">
		<view class="top-bg" :style="{backgroundImage:`url(${baseUrl}/upload/qiniu/images/icon/index_bg.png)`}">
		</view>
		<view class="logo-box">
			<view class="m_goBack" v-if="showBack" @click.stop="handlergoBack()"><u-icon name="arrow-left" color="#fff"
					size="20"></u-icon></view>
			<view class="user-box" :style="'height: ' + topHight + 'px;'">

				<view class="user-info">
					<view class="user-name">
						{{nickname || ''}}
					</view>
					<view class="user-size">
						账号：{{mobile || ''}}
					</view>
					<view class="user-size">
						身份：{{position || ''}}
					</view>
				</view>
				<view class="user-img">
					<u-avatar :src="avatar ? avatar : require('@/static/images/v2/icon/user-logo.png')"
						size="108rpx"></u-avatar>
				</view>
			</view>
			<!-- 顶部下拉 -->
			<view class="index-box">
				<view class="index-fow">
					<span>活动选择</span>
				</view>
				<view class="index-input" @click="getSelectType">
					<span class="index-type-size">
						{{typeName}}
					</span>
				</view>
				<view class="indx-img" @click="copyhaibao">
					<image src="@/static/images/v2/icon/copy.png" style="width: 54rpx;height: 54rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 类型弹出层 -->
		<u-picker :show="show" @confirm="selectOk" closeOnClickOverlay keyName="title" @close="show = false"
			:columns="AcitveColumns" :immediateChange='true' @cancel="show = false" mode="selector"></u-picker>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from "vuex";
	import {
		getActiveList,
	} from '@/api/system/index'

	import config from '@/config'
	export default {
		name: "head-item",
		props: {
			activeTitle: {
				type: String,
				default: ""
			},
			showBack: {
				type: Boolean,
				default: false
			}


		},
		computed: {
			...mapGetters(["avatar", "nickname", "mobile", "position", 'autoname'])
		},
		data() {
			return {
				show: false,
				AcitveColumns: [],
				typeName: "",
				typeid: "",
				baseUrl: config.baseUrl,
			};
		},
		created() {

		},
		mounted() {
			// this.getAcitveData()
		},
		methods: {
			handlergoBack() {
				//如果没有上一个页面 就回到首页
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			getSelectType() {
				this.show = true
			},
			//获取活动列表
			getAcitveData() {

				var that = this

				var data = {
					page: 1,
					limit: 50,
					state: 0
				}
				var arr = []
				getActiveList(data).then(res => {

					if (!res.code) {

						if (res.data.length > 0) {
							arr.push(res.data)
							that.AcitveColumns = arr;
							that.typeName = res.data[0].title
							that.typeid = res.data[0].id

							var stort_ac_id = uni.getStorageSync('active_id')
							var stort_ac_title = uni.getStorageSync('active_title')
							uni.setStorageSync('summary', "all");

							//判断缓存是否
							if (stort_ac_id) {

								if (res.data.findIndex(item => item.id === stort_ac_id) !== -1) {
									//存在
									that.typeid = stort_ac_id
									that.typeName = stort_ac_title
								}
							} else {

								uni.setStorageSync('active_id', res.data[0].id);
								uni.setStorageSync('active_title', res.data[0].title);
								uni.setStorageSync('summary', "all");
							}

							that.$emit("getParentList", {
								active_id: that.typeid,
								active_title: that.typeName
							})

						}

					} else {

						that.$refs.uToast.show({
							type: 'error',
							message: res.msg

						})
					}

				})
			},
			selectOk(e) {

				this.listData = []
				var data = e.value[0]
				uni.setStorageSync('active_id', data.id);
				uni.setStorageSync('active_title', data.title);
				this.typeName = data.title
				this.typeid = data.id
				this.show = false
				this.$emit("getParentList", {
					active_id: this.typeid,
					active_title: this.typeName
				})

			},
			copyhaibao() {
				this.$emit("copyhaibao")
			}
		}
	}
</script>

<style lang="less">
	.top {
		width: 100%;
		height: 100%;

		// position: relative;
		// display: flex;
		// flex-direction: column;
		// z-index: 1000;
		.m_goBack {
			position: absolute;
			top: 100rpx;
			left: 50rpx;
		}

		.logo-box {
			// background-color: #3477FC;
			width: 100%;
			// height: 310rpx;
			// position: absolute;
			font-weight: bold;

			// z-index: -100;
			.user-box {
				padding: 150rpx 60rpx 40rpx 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.user-info {
					.user-name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: rgba(255, 255, 255, 0.85);
						line-height: 64rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.user-size {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

			}

			.index-box {
				display: flex;
				justify-content: flex-start;
				bottom: 10%;
				width: 95%;
				padding: 0px 10px;
				margin: 0 auto;


				.index-fow {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.85);
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					padding-right: 20rpx;
				}

				.index-input {
					width: 454rpx;
					height: 54rpx;
					background: rgba(176, 206, 255, 0.6);
					border-radius: 948rpx 948rpx 948rpx 948rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.index-type-size {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.85);
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;

					}
				}

				.indx-img {
					padding-left: 20rpx;
				}

				// color: #fff;
				.index-cell {
					border: 1px solid #fff;
				}
			}


		}
	}
</style>